<template>
	<div class="train-video">
		<div class="crumbs-link maxW">
			<span @click="goback()">培训列表</span>
			<router-link to="/train/teacher-detail"><i>></i>XXX培训</router-link>
			<strong><i>></i>这是文档名称</strong>
		</div>

		<div class="train-video-wp">
			<div class="train-video-title clear maxW">
				<span @click="goback()">
					<i><</i>
					无纸化系统
				</span>

				<div class="train-video-r fr">
					<div class="train-video-collection box">
						<span>收藏 <i class="ipng Collection04"></i></span>
						<span>已收藏 <i class="ipng collection08"></i></span>
					</div>

					<div class="train-file-l-share box">
						<span>分享至</span>
						<div>
							<a class="ipng but_weichat_up" href="###"></a>
							<a class="ipng but_qq_up" href="###"></a>
							<a class="ipng but_weibo_up" href="###"></a>
						</div>
					</div>
				</div>
			</div>


<!-- 
			<video-player  class="video-player vjs-custom-skin maxW train-video-player" id="videoPlayer"
			     ref="videoPlayer"
			     :playsinline="true"
			     :options="playerOptions"
			></video-player> -->
          <!-- <videoAlertView v-if="showVideoPlayer" class="train-video-player" :playParam.sync="playParam"></videoAlertView> -->
                        
			<div class="train-loop-playback maxW">
				<span>
					轮播
					<el-switch
						v-model="loop_playback"
						active-color="#338efc"
						inactive-color="#ACB5BE">
					</el-switch>
				</span>
			</div>

			<!--  -->
			<div class="rigth-sidebar clear">
				
				<div class="sidebar-btn fl">
					<span>
						<i class="ipng but_bijidown"></i>
						<em>切片</em>
					</span>
					<span>
						<i class="ipng but_bijidown"></i>
						<em>笔记</em>
					</span>
					<span>
						<i class="ipng but_taolundown"></i>
						<em>答疑</em>
					</span>
					<span>
						<i class="ipng but_dolonddown"></i>
						<em>下载</em>
					</span>
				</div>

				<div class="sidebar-content fr">
					
					<!-- 切片 -->
					<div class="video-txt section-v" v-show="0">
						
						<el-scrollbar>
							<ul>
								<li class="section-list clear">
									<div class="fl">
										<img src="../../../../public/images/image_loding.png">
									</div>
									<router-link to="###">节选：规划玫瑰花</router-link>
								</li>
								<li class="section-list clear">
									<div class="fl">
										<img src="../../../../public/images/image_loding.png">
									</div>
									<router-link to="###">节选：规划玫瑰花</router-link>
								</li>
							</ul>
						</el-scrollbar>
					</div>
					
					<!-- 笔记 -->
					<div class="video-txt note-v" v-show="0">
						
						<el-tabs v-model="activeName2" type="card">

						  <el-tab-pane label="个人笔记" name="1">
						  	<div class="note-focus">
							  	<div class="note-input">
							  		<el-input
							  		  type="textarea"
							  		  maxlength="200"
							  		  :rows="4" resize="none"
							  		  placeholder="请输入内容"
							  		  v-model="note_val">
							  		</el-input>
									<span class="numberWord"><i>{{note_val.length}}</i>/200</span>
							  	</div>

							  	<div class="note-input-btn clear">
							  		<div class="fl">
							  			<i class="ipng but_addamage"></i>
							  			<el-checkbox v-model="screenshot">是否截图</el-checkbox>
							  		</div>
							  		<el-button type="primary">确定</el-button>
							  	</div>

							  	<div class="note-cont">
							  		<el-scrollbar>
							  			<ul>
							  				<li class="note-list clear">
							  					<div class="note-list-head fl">
							  						<img src="../../../../public/images/Group9.png">
							  					</div>
							  					<div class="note-list-fr">
							  						<div class="note-list-fr-1">
							  							<span>qiu_m</span>
							  						</div>

							  						<div class="note-list-fr-2">
							  							原本以为百花齐放的背单词App能将我从传统词汇书的abandon魔咒中解救出来，在经历了某斩、某词、某贝、某不背等App的轮番洗礼后，最终在硝烟弥漫中一次又一次的阵亡，后来索性全部卸载，一切皆空。
							  						</div>

							  						<div class="note-list-fr-edit" v-if="0">
							  							<el-input
								  							type="textarea"
								  							:rows="6" resize="none"
								  							placeholder="请输入内容"
								  							maxlength="200"
								  							v-model="note_val">
								  						</el-input>
								  						<span class="numberWord"><i>{{note_val.length}}</i>/200</span>
								  						<div>
								  							<el-button type="primary">确定</el-button>
								  						</div>
							  						</div>

							  						<div class="note-list-fr-3">
							  							<img src="../../../../public/images/image_loding.png" alt="">
							  							<div>
							  								<span>查看图片</span>
							  							</div>
							  						</div>

							  						<div class="note-list-fr-4 clear">
							  							<span>16:45:30</span>
							  							<div class="fr">
							  								<i class="ipng but_edit01"></i>
							  								<i class="ipng but_del"></i>
							  							</div>
							  						</div>

							  					</div>
							  				</li>
							  			</ul>
							  		</el-scrollbar>
							  	</div>
							</div>

						  </el-tab-pane>

						  <el-tab-pane label="大家的笔记" name="2">
						  	  	<div class="note-focus note-all">

						  		  	<div class="note-cont">
						  		  		<el-scrollbar>
						  		  			<ul>
						  		  				<li class="note-list clear">
						  		  					<div class="note-list-head fl">
						  		  						<img src="../../../../public/images/Group9.png">
						  		  					</div>
						  		  					<div class="note-list-fr">
						  		  						<div class="note-list-fr-1">
						  		  							<span>qiu_m</span>
						  		  						</div>

						  		  						<div class="note-list-fr-2">
						  		  							原本以为百花齐放的背单词App能将我从传统词汇书的abandon魔咒中解救出来，在经历了某斩、某词、某贝、某不背等App的轮番洗礼后，最终在硝烟弥漫中一次又一次的阵亡，后来索性全部卸载，一切皆空。
						  		  						</div>

						  		  						<div class="note-list-fr-3">
						  		  							<img src="../../../../public/images/image_loding.png" alt="">
						  		  							<div>
						  		  								<span>查看图片</span>
						  		  							</div>
						  		  						</div>

						  		  						<div class="note-list-fr-4 clear">
						  		  							<span>16:45:30</span>
						  		  						</div>
						  		  					</div>
						  		  				</li>
						  		  			</ul>
						  		  		</el-scrollbar>
						  		  	</div>
						  		</div>
						  </el-tab-pane>
						</el-tabs>

					</div>

					<!-- 答疑 -->
					<div class="video-txt note-v" v-show="1">
						
						<el-tabs v-model="activeName3" type="card">

						  <el-tab-pane label="个人的问题" name="1">
						  	<div class="note-focus">
							  	<div class="note-input">
							  		<el-input
							  		  type="textarea"
							  		  maxlength="200"
							  		  :rows="4" resize="none"
							  		  placeholder="请输入内容"
							  		  v-model="note_val">
							  		</el-input>
									<span class="numberWord"><i>{{note_val.length}}</i>/200</span>
							  	</div>

							  	<div class="note-input-btn clear">
							  		<div class="fl">
							  			<i class="ipng but_addamage"></i>
							  			<el-checkbox v-model="screenshot">是否截图</el-checkbox>
							  		</div>
							  		<el-button type="primary">确定</el-button>
							  	</div>

							  	<div class="note-cont">
							  		<el-scrollbar>
							  			<ul>
							  				<li class="note-list clear">
							  					<div class="note-list-head fl">
							  						<img src="../../../../public/images/Group9.png">
							  					</div>
							  					<div class="note-list-fr">
							  						<div class="note-list-fr-1">
							  							<span>qiu_m</span>
							  						</div>

							  						<div class="note-list-fr-2">
							  							原本以为百花齐放的背单词App能将我从传统词汇书的abandon魔咒中解救出来，在经历了某斩、某词、某贝、某不背等App的轮番洗礼后，最终在硝烟弥漫中一次又一次的阵亡，后来索性全部卸载，一切皆空。
							  						</div>

							  						<div class="note-list-fr-edit" v-if="0">
							  							<el-input
								  							type="textarea"
								  							:rows="6" resize="none"
								  							placeholder="请输入内容"
								  							maxlength="200"
								  							v-model="note_val">
								  						</el-input>
								  						<span class="numberWord"><i>{{note_val.length}}</i>/200</span>
								  						<div>
								  							<el-button type="primary">确定</el-button>
								  						</div>
							  						</div>

							  						<div class="note-list-fr-3">
							  							<img src="../../../../public/images/image_loding.png" alt="">
							  							<div>
							  								<span>查看图片</span>
							  							</div>
							  						</div>

							  						<div class="note-list-fr-4 clear">
							  							<span>16:45:30</span>
							  							<div class="fr">
							  								<i class="ipng but_edit01"></i>
							  								<i class="ipng but_del"></i>
							  							</div>
							  						</div>

							  						<div class="note-list-fr-5">
							  							<span>[李娜的回复]</span>
							  							<div class="">
							  								属性可以使得文本域的高度能够根据文本内容自动进行调整
							  							</div>
							  						</div>
							  					</div>
							  				</li>
							  			</ul>
							  		</el-scrollbar>
							  	</div>
							</div>

						  </el-tab-pane>

						  <el-tab-pane label="大家的问题" name="2">
						  	  	<div class="note-focus note-all">

						  		  	<div class="note-cont">
						  		  		<el-scrollbar>
						  		  			<ul>
						  		  				<li class="note-list clear">
						  		  					<div class="note-list-head fl">
						  		  						<img src="../../../../public/images/Group9.png">
						  		  					</div>
						  		  					<div class="note-list-fr">
						  		  						<div class="note-list-fr-1">
						  		  							<span>qiu_m</span>
						  		  						</div>

						  		  						<div class="note-list-fr-2">
						  		  							原本以为百花齐放的背单词App能将我从传统词汇书的abandon魔咒中解救出来，在经历了某斩、某词、某贝、某不背等App的轮番洗礼后，最终在硝烟弥漫中一次又一次的阵亡，后来索性全部卸载，一切皆空。
						  		  						</div>

						  		  						<div class="note-list-fr-3">
						  		  							<img src="../../../../public/images/image_loding.png" alt="">
						  		  							<div>
						  		  								<span>查看图片</span>
						  		  							</div>
						  		  						</div>

						  		  						<div class="note-list-fr-4 clear">
						  		  							<span>16:45:30</span>
						  		  						</div>

						  		  						<div class="note-list-fr-5">
						  		  							<span>[李娜的回复]</span>
						  		  							<div class="">
						  		  								属性可以使得文本域的高度能够根据文本内容自动进行调整
						  		  							</div>
						  		  						</div>
						  		  					</div>
						  		  				</li>
						  		  			</ul>
						  		  		</el-scrollbar>
						  		  	</div>
						  		</div>
						  </el-tab-pane>
						</el-tabs>

					</div>

				</div>
			</div>
		</div>

		<div class="train-vide-taps maxW clear">

			<div class="train-vide-taps-l fl">
				<el-tabs v-model="activeName">
					<el-tab-pane label="课程介绍" name="1">
						<div class="train-vide-introduce">

							<div class="train-video-introduce-info">
								<span>
									<i class="ipng but_Collection02_down"></i>
									<em>700收藏</em>
								</span>
								<span>
									<i class="ipng icon_see"></i>
									<em>1900播放</em>
								</span>
								<span>
									<i class="ipng comment01"></i>
									<em>5000o评论</em>
								</span>
								<span>
									<i class="ipng but_doland02_up"></i>
									<em>9000下载</em>
								</span>
							</div>
							
							<ul>
								<li class="train-video-introduce-txt clear">
									<span>课程分类</span>
									<div>
										<span>小学 > 二年级 >  语文</span>
									</div>
								</li>
								<li class="train-video-introduce-txt clear">
									<span>关键字</span>
									<div>
										<span>暂无关键字</span>
									</div>
								</li>
								<li class="train-video-introduce-txt clear">
									<span>课程简介</span>
									<div>
										<span>暂无简介</span>
									</div>
								</li>
								<li class="train-video-introduce-txt clear">
									<span>课程须知</span>
									<div>
										<span>这节课非常有意思和教育意义</span>
									</div>
								</li>
							</ul>
						</div>
					</el-tab-pane>

					<el-tab-pane label="讲师介绍" name="2">
						<div class="train-vide-introduce">
							
							<ul>
								<li class="train-video-introduce-txt clear">
									<span>老师信息</span>
									<div class="clear train-video-teacher">
										<div class="train-video-teacher-img fl">
											<img src="./../../../../public/images/Group9.png">
										</div>
										<div class="train-video-teacher-txt">
											<a href="###">李娜</a>
											<p>三年级 - 语文</p>
										</div>
									</div>
								</li>
								<li class="train-video-introduce-txt clear">
									<span>老师简介</span>
									<div>
										<span>暂无关键字</span>
									</div>
								</li>
								<li class="train-video-introduce-txt clear">
									<span>其他课程</span>
									<div>
										<a href="###">水电费</a>
									</div>
								</li>
							</ul>
						</div>
					</el-tab-pane>

					<el-tab-pane label="评论" name="3">

						<div class="train-video-comment">
							
							<div class="train-video-comment-score clear">
								<span>给该课程评分：</span>
								<el-rate v-model="score_value"></el-rate>
							</div>

							<div class="train-video-comment-focus">
								<el-input
								  type="textarea"
								  :rows="6" resize="none"
								  maxlength="200"
								  placeholder="快来点评一下吧，大胆想说出你的想法~~"
								  v-model="comment">
								</el-input>
								<span class="numberWord"><i>0</i>/200</span>
							</div>

							<div class="train-video-comment-submit">
								<el-button type="primary">确定</el-button>
							</div> 

							<div class="train-video-comment-t">
								<span>评论 </span>
								<span>时间 <i class="el-icon-sort-down"></i></span>
								<span>时间 <i class="el-icon-sort-up"></i></span>
							</div>

							<ul>
								<li class="train-video-comment-list clear">
									<div class="train-video-comment-list-l fl">
										<img src="./../../../../public/images/Group9.png" >
									</div>

									<div class="train-video-comment-list-r">
										
										<div class="train-video-comment-list-r-h clear">

											<div class="train-video-comment-score clear fl">
												<span>给该课程评分：</span>
												<el-rate
												  v-model="value5"
												  disabled
												  show-score
												  :show-text="false"
												  text-color="#ff9900"
												  score-template="{value}">
												</el-rate>
											</div>

											<div class="train-video-comment-time fr">
												<span>2018-09-18</span>
											</div>
										</div>

										<div class="train-video-comment-val">
											水电费第三方
										</div>

									</div>
								</li>
							</ul>
						</div>

					</el-tab-pane>
				</el-tabs>
			</div>

			<div class="train-vide-taps-r">
				<h3>资料下载</h3>

				<div class="train-vide-taps-r-download">
					
					<ul>
						<li class="train-vide-download clear">
							<span>第三方Javascript包下载</span>
							<i class="ipng but_doland02_slide"></i>
						</li>
						<li class="train-vide-download clear">
							<span>第三方Javascript包下载</span>
							<i class="ipng but_doland02_slide"></i>
						</li>
					</ul>

					<div class="placeholder-v" v-if="placeholder">
						<i class="ipng couse01"></i>
						<span>还没有发现任何资料</span>
					</div>

				</div>

				<h3>我的同学</h3>

				<div class="train-vide-taps-r-classmate">
					<ul class="clear">
						<li class="my-classmate fl">
							<el-popover
								placement="bottom"
								width="290"
								popper-class="classmate_hover"
								trigger="hover">
								<div class="my-classmate-info">

									<div class="my-classmate-info-txt clear">
										<a href="###">
											<img src="./../../../../public/images/Group9.png" >
										</a>
										<div>
											<span>qiu_m</span>
											<span>广州市番禺区</span>
											<span>星海音乐学院/高三（二）班</span>
										</div>
									</div>

									<div class="my-classmate-info-icon">
										<i class="ipng but_maino1_up"></i>
										<i class="ipng but_Collection02_up"></i>
									</div>
								</div>
								<div  slot="reference" class="my-classmate-img">
									<img src="./../../../../public/images/Group9.png" >
								</div>
							</el-popover>
						</li>

						<li class="my-classmate fl">
							<el-popover
								placement="bottom"
								width="290"
								popper-class="classmate_hover"
								trigger="hover">
								<div class="my-classmate-info">

									<div class="my-classmate-info-txt clear">
										<a href="###">
											<img src="./../../../../public/images/Group9.png" >
										</a>
										<div>
											<span>qiu_m</span>
											<span>广州市番禺区</span>
											<span>星海音乐学院/高三（二）班</span>
										</div>
									</div>

									<div class="my-classmate-info-icon">
										<i class="ipng but_maino1_up"></i>
										<i class="ipng but_Collection02_up"></i>
									</div>
								</div>
								<div  slot="reference" class="my-classmate-img">
									<img src="./../../../../public/images/Group9.png" >
								</div>
							</el-popover>
						</li>
						<li class="my-classmate fl">
							<el-popover
								placement="bottom"
								width="290"
								popper-class="classmate_hover"
								trigger="hover">
								<div class="my-classmate-info">

									<div class="my-classmate-info-txt clear">
										<a href="###">
											<img src="./../../../../public/images/Group9.png" >
										</a>
										<div>
											<span>qiu_m</span>
											<span>广州市番禺区</span>
											<span>星海音乐学院/高三（二）班</span>
										</div>
									</div>

									<div class="my-classmate-info-icon">
										<i class="ipng but_maino1_up"></i>
										<i class="ipng but_Collection02_up"></i>
									</div>
								</div>
								<div  slot="reference" class="my-classmate-img">
									<img src="./../../../../public/images/Group9.png" >
								</div>
							</el-popover>
						</li>

						<li class="my-classmate fl">
							<el-popover
								placement="bottom"
								width="290"
								popper-class="classmate_hover"
								trigger="hover">
								<div class="my-classmate-info">

									<div class="my-classmate-info-txt clear">
										<a href="###">
											<img src="./../../../../public/images/Group9.png" >
										</a>
										<div>
											<span>qiu_m</span>
											<span>广州市番禺区</span>
											<span>星海音乐学院/高三（二）班</span>
										</div>
									</div>

									<div class="my-classmate-info-icon">
										<i class="ipng but_maino1_up"></i>
										<i class="ipng but_Collection02_up"></i>
									</div>
								</div>
								<div  slot="reference" class="my-classmate-img">
									<img src="./../../../../public/images/Group9.png" >
								</div>
							</el-popover>
						</li>
						<li class="my-classmate fl">
							<el-popover
								placement="bottom"
								width="290"
								popper-class="classmate_hover"
								trigger="hover">
								<div class="my-classmate-info">

									<div class="my-classmate-info-txt clear">
										<a href="###">
											<img src="./../../../../public/images/Group9.png" >
										</a>
										<div>
											<span>qiu_m</span>
											<span>广州市番禺区</span>
											<span>星海音乐学院/高三（二）班</span>
										</div>
									</div>

									<div class="my-classmate-info-icon">
										<i class="ipng but_maino1_up"></i>
										<i class="ipng but_Collection02_up"></i>
									</div>
								</div>
								<div  slot="reference" class="my-classmate-img">
									<img src="./../../../../public/images/Group9.png" >
								</div>
							</el-popover>
						</li>
					</ul>

					<div class="placeholder-c">
						<i class="ipng couse02"></i>
						<p>还没有同学来学习过哟～</p>
					</div>
				</div>
			</div>

		</div>

		<el-dialog
			title="查看图片"
			:visible.sync="pictureVisible"
			width="auto"
			top="5vh"
			custom-class="visible picture-img"
			:close-on-click-modal="false">
			<div>
				<img src="../../../../public/images/image08.png" alt="">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	
	// import { videoPlayer } from 'vue-video-player'
	// import 'video.js/dist/video-js.css'
// import videoAlertView from "../../common/videoAlertView";

	export default {
		components: {
            // videoAlertView
			// videoPlayer
		},
		data(){
			return {
                showVideoPlayer: false,
                playParam: { play_url: "" },
				// playerOptions: {
			    //       muted: true,
			    //       language: 'en',
			    //       playbackRates: [0.7, 1.0, 1.5, 2.0],
			    //       sources: [{
			    //       	type: "video/mp4",
			    //       	src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
			    //       }],
			    //       poster: "https://images.pexels.com/photos/696179/pexels-photo-696179.jpeg?cs=srgb&dl=buch-fruhstuck-gesundheit-696179.jpg&fm=jpg",
				// },
				loop_playback: false,

				activeName: '1',
				score_value: null,
				comment: '',
				value5: 3,
				placeholder: true,

				activeName2: '1',
				note_val: '',
				screenshot: false,

				activeName3: '1',
				pictureVisible: true,
			}
		},
		methods: {
			goback(){
				this.$router.back(-1)
			},

			onPlayerPlay(player) {
			       // console.log('player play!', player)
			},
			onPlayerPause(player) {
			       // console.log('player pause!', player)
			},
		}
	}
</script>